<template>
    <div class="avatar-frame">
      <div
        class="avatar-frame__avatar"
        :style="avatarStyle"
      >
        {{avatarObj.name[1]}}
      </div>
      <div class="avatar-frame__collective">
        <div class="avatar-frame__title">
          <span class="avatar-frame__name">团队1</span>
        </div>
        <div class="avatar-frame__tag">
          <span class="tag">负责人: xxx</span>
        </div>
      </div>
      <i class="cubeic-arrow"></i>
    </div>
</template>

<script>
import ddAvatar from '../avatar/avatar'

export default {
  name: 'group-item',
  computed: {
    avatarObj () {
      return ddAvatar.getAvatar('叶岳林')
    },
    avatarStyle () {
      return {
        background: this.avatarObj.color,
        borderRadius: '24%'
      }
    }
  }
}
</script>

<style scoped>
.avatar-frame{
  position: relative;
  display:flex;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  color: #323233;
  background-color: #fff;
  padding: 12px;
  border-bottom:1px solid #F6F6F6;
}
.avatar-frame__avatar{
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
}

.avatar-frame__collective{
  display: flex;
  flex-direction: column;
  margin-left: 12px;
  max-width: 80%;
  justify-content: space-around;
}
.avatar-frame__title{
  display: flex;
}
.avatar-frame__name{
  font-size: 16px;
  color:#222222;
  font-weight: bold;
  text-align: start;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: auto;
}
.avatar-frame__title .principal{
  flex: none;
  line-height: 20px;
  font-size: 10px;
  font-weight: normal;
  color:#FF8E3D;
  margin-left: 8px;
}
.avatar-frame__tag{
  display: flex;
  align-items: flex-end;
}
.avatar-frame__tag .tag{
  font-size:12px;
  color:#999999;
}
.cubeic-arrow{
  position: absolute;
  right: 4%;
  top: 36%;
  color: #ccc;
}
</style>
